
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<style>

</style>

<body>

<div id="app">
    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
              @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按书名搜索" value="book_name"></el-option>
        <el-option label="借阅者账号" value="username"></el-option>
        <el-option label="按书籍号搜索" value="bid"></el-option>
        <el-option label="搜索未归还" value="return"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="text-center sorting">书籍名</th>
            <th class="text-center sorting">书籍号</th>
            <th class="text-center sorting">借阅者账号</th>
            <th class="text-center sorting">借阅者姓名</th>
            <th class="text-center sorting">借书日期</th>
            <th class="text-center sorting">截至日期</th>
            <th class="text-center sorting">是否归还</th>
            <th class="text-center sorting">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(brand,index) in brands">
            <td class="text-center sorting">{{brand.book_name}}</td>
            <td class="text-center sorting">{{brand.bid}}</td>
            <td class="text-center sorting">{{brand.username}}</td>
            <td class="text-center sorting">{{brand.admin_name}}</td>
            <td class="text-center sorting">{{brand.begin_time}}</td>
            <td class="text-center sorting">{{brand.end_time}}</td>
            <td class="text-center sorting">
                <span v-if="brand.status==2" class="text-center sorting">已归还</span>

                <span v-else-if="brand.status==1&aa(brand.end_time)" style="color: red" class="text-center sorting">
	                  <el-tag>剩余{{Remainingdays}}天</el-tag>
	            </span>

                <span v-else-if="aa(brand.end_time)==false" style="color: red" class="text-center sorting">
	                  <el-tag type="danger">已逾期</el-tag>
	            </span>

            </td>
            <td class="text-center sorting" v-if="brand.status==1">
                <el-button round  type="primary" v-on:click="updateById(brand.hid)">延期</el-button>
                <el-button round  type="danger" v-on:click="deleteById(brand.hid,brand.end_time)">归还</el-button>
            </td>
            <td class="text-center sorting" v-if="brand.status==2">
                <el-button round  type="primary" v-on:click="updateById(brand.hid)" disabled>延期</el-button>
                <el-button round  type="danger" v-on:click="deleteById(brand.hid)" disabled>归还</el-button>
            </td>
        </tr>
        </tbody>
    </table>


    <el-dialog
            title="支付页面"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>已逾期<el-tag type="danger">{{yuqidayCount}}</el-tag>天,需要补交<el-tag>{{moneyCount}}</el-tag>元</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="paymentSuccess ">已支付</el-button>
        </span>
    </el-dialog>



    <el-dialog
            title="修改书籍归还信息"
            :visible.sync="updateBookDialogVisible"
            width="50%"
            @close="resetAddBookForm"
    >
        <!-- 书籍表单内容 -->
        <el-form :model="updateBookHisInfo" ref="addBookForm" label-width="100px">
            <el-form-item label="书籍名" prop="book_name" :rules="[
    { required: true, message: '书籍名不能为空', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.book_name" disabled></el-input>
            </el-form-item>

            <el-form-item label="书籍号" prop="bid" :rules="[
    { required: true, message: '书籍号不能为空', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.bid" disabled></el-input>
            </el-form-item>

            <el-form-item label="借阅者账号" prop="aid" :rules="[
    { required: true, message: '借阅者账号不能为空', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.aid" disabled ></el-input>
            </el-form-item>

            <el-form-item label="借阅者姓名" prop="admin_name" :rules="[
    { required: true, message: '借阅者姓名不能为空', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.admin_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="借书日期" prop="begin_time" :rules="[
    { required: true, message: '借书日期不能为空', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.begin_time" disabled></el-input>
            </el-form-item>
            <el-form-item label="截至日期" prop="end_name" :rules="[
    { required: true, message: '请按照格式:2004-07-07', trigger: 'blur' }
]">
                <el-input v-model="updateBookHisInfo.end_time"></el-input>
            </el-form-item>

            <el-form-item label="是否归还" prop="status" :rules="[
    { required: true, message: '请选择是否归还', trigger: 'blur' }
]">
                <el-select v-model="updateBookHisInfo.status" disabled> <!--placeholder="请选择性别"-->
                    <el-option label="已归还" value="2"></el-option>
                    <el-option label="未归还" value="1"></el-option>
                </el-select>

            </el-form-item>



        </el-form>

        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateBookDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUpdateBookForm">提交</el-button>
             </span>
    </el-dialog>


    <div class="box-footer">
        <div class="pull-left">
            <div class="form-group form-inline">
                总共{{pages}} 页，共{{total}} 条数据。 每页
                <select class="form-control" v-model="meiye">
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                    <option>50</option>
                    <option>80</option>
                </select> 条
            </div>
        </div>

        <div class="box-tools pull-right">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                </li>
                <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                <li v-for="index in (pages>=7)?(7):(pages)"
                    class="paginate_button">
                    <a href="#" @click="goPage(index)">{{index}}</a></li>
                <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

            </ul>
        </div>

    </div>
<!--    <template>-->
<!--        <div>-->
<!--            <el-table v-bind:data="brands">-->
<!--                <el-table-column label="ID" prop="index"></el-table-column>-->
<!--                <el-table-column label="用户名" prop="username"></el-table-column>-->
<!--                <el-table-column label="书籍名" prop="book_name"></el-table-column>-->
<!--                <el-table-column label="书籍号" prop="bid"></el-table-column>-->
<!--                <el-table-column label="借书日期" prop="begin_time"></el-table-column>-->
<!--                <el-table-column label="截至日期" prop="end_time"></el-table-column>-->
<!--                <el-table-column label="是否归还" v-if="status==2">已归还111</el-table-column>-->
<!--                <el-table-column label="是否归还" v-if="status==1">未归还</el-table-column>-->
<!--            </el-table>-->

<!--            <el-pagination-->
<!--                    :page-sizes="[5,10, 20, 30, 40]"-->
<!--                    :page-size="10"-->
<!--                    layout="total, sizes, prev, pager, next, jumper"-->
<!--                    :total="brands.length"-->
<!--                    :current-page="1"-->
<!--            ></el-pagination>-->
<!--        </div>-->
<!--    </template>-->



</div>

</body>

<script>


    new Vue({
        el: '#app',
        data() {
            return {
                brands:[],
                total: "",
                pages: "",
                pageNum: "",
                dialogVisible:false,//支付窗口页面
                yuqidayCount:'',//逾期天数
                moneyCount:'',//逾期罚款
                bookId:'',
                size: "",
                meiye:10,
                searchText:"",
                searchType:"",
                updateBookDialogVisible:false,
                today:'',
                Remainingdays:'',
                updateBookHisInfo: {
                    hid:'',
                    book_name: '',
                    admin_name: '',
                    user_name: '',
                    end_time: '',
                    begin_time: '',
                    status: '',
                    bid: ''
                },
            }
        },
        mounted(){
            this.today=this.getCurrentDate()
            this.selAll()
        },
        methods: {
            getCurrentDate() {
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth() + 1;
                let day = now.getDate();
                return year + "-" + month + "-" + day;
            },
            aa(end_time) {
                var date = new Date(end_time);
                var now = new Date(this.today);
                if (now < date) {
                    let day = date.getTime() - now.getTime();//日期转时间戳
                    let dayCount = Math.floor(day / 86400000);//时间戳获取天数
                    this.Remainingdays = dayCount
                    return true
                } else {
                    return false
                }
            },
            updateById(hid) {
                var _this = this;
                this.updateBookDialogVisible = true;
                axios({
                    method: "post",
                    url: "/web/admin/FinBookHisInfoByBid?hid=" + hid,
                }).then(function (resp) {
                    _this.updateBookHisInfo = resp.data;
                    if (resp.data.status == 2) {
                        _this.updateBookHisInfo.status = '已归还';
                    } else {
                        _this.updateBookHisInfo.status = '未归还';
                    }

                })
            },
            selAll() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/web/admin/selectAllBookHisInfo"
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            deleteById(hid, end_time) {
                //判断是否逾期
                var date = new Date(end_time);
                var now = new Date(this.today);
                if (now < date) {//没有逾期执行归还
                    this.bb(hid)
                } else {
                    // todo 支付
                    this.bookId=hid;
                    let day = date.getTime() - now.getTime();//日期转时间戳
                    let dayCount = Math.floor(day * -1 / 86400000);//时间戳获取天数
                    this.yuqidayCount = dayCount;//逾期天数
                    let money = 0;
                    //逻辑判断需要出多少钱
                    if (dayCount > 0 && dayCount <= 7) {
                        money = 2;//一周之内两元
                    } else if (dayCount > 7 && dayCount <= 14) {
                        money = 5;//两周五元
                    } else if (dayCount > 14) {
                        //大于两周则每天增加一元
                        money = 5 + dayCount - 14
                    }
                    if (money>30){
                        money=30
                    }
                    this.moneyCount = money
                    this.dialogVisible = true
                }
            },
            paymentSuccess(){//支付成功调用还书的方法
                this.dialogVisible=false
                this.bb(this.bookId)
            },
            bb(hid) {//归还书籍
                var _this = this;
                axios({
                    method: "post",
                    url: "/web/admin/deleteBookHisInfoByHid?hid=" + hid,
                }).then(function (resp) {
                    if (resp.data == 1) {
                        _this.$message.success('归还成功！');
                        _this.selAll()
                    } else {
                        _this.$message.error('归还失败！');
                    }
                })
            },
            submitUpdateBookForm() {
                var _this = this;
                var status;
                if (_this.updateBookHisInfo.status == 1) {
                    status = 1;
                } else {
                    status = 2;
                }

                var a = {
                    "hid": _this.updateBookHisInfo.hid,
                    "end_time": _this.updateBookHisInfo.end_time,
                }
                var json = JSON.stringify(a);
                axios({
                    method: "post",
                    url: "/web/admin/updateBookHisInfoByHid",
                    data: json
                }).then(function (resp) {
                    if (resp.data == 1) {
                        _this.updateBookDialogVisible = false;
                        _this.$message.success('修改成功！');
                        _this.selAll()
                    } else {
                        _this.$message.error('修改失败！');
                    }
                })
            },
            handleSearch() {
                var json = {
                    "text": this.searchText,
                    "type": this.searchType
                };
                var jsonstr = JSON.stringify(json);
                var _this = this;
                axios({
                    method: "post",
                    url: "/web/admin/findAllBookHisInfo",
                    data: jsonstr
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                var a = {
                    "page": index,
                    "type": _this.searchType,
                    "text": _this.searchText
                }
                var s = JSON.stringify(a);
                // 页面加载完成后，发送异步请求，查询数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/admin/selectAllBookHisInfo2",
                    data: s
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                var a = {
                    "page": index,
                    "size": _this.meiye,
                    "type": _this.searchType,
                    "text": _this.searchText
                }
                var s = JSON.stringify(a);
                axios({
                    method: "post",
                    //?page=" + index+"&size="+_this.meiye
                    url: "http://localhost:8080/web/admin/selectAllBookHisInfo2",
                    data: s
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
        }
    })
</script>


</html>